<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        .sold {
            border: solid 1px;
            width: 100%;
        }

        .center {
            text-align: center;
        }

        .dbc {
            display: block;
            margin: 10px auto;
        }

        th {
            border: solid 1px;
        }

        td {
            border: solid 1px;
        }

        caption {
            font-size: 50px;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <div id="app">
        <table class="sold center">
            <caption>盛世集团组织架构</caption>
            <th>分公司编号</th>
            <th>分公司名称</th>
            <th>分公司地理位置</th>
            <th>分公司总经理</th>
            <th>详情查看</th>
            <tr v-for="dept in depts">
                <td>{{dept.dId}}</td>
                <td>{{dept.dLocation}}</td>
                <td>{{dept.dName}}</td>
                <td>{{dept.leader}}</td>
                <td><a :href='"emp.html?id=" + dept.dId'>查看部门员工</a></td>
            </tr>
        </table>
    </div>
    <script>
        const App = {
            data() {
                return {
                    depts: null
                }
            },
            created() {
                axios.get('http://127.0.0.1:8080/Test/dept').then(({
                    data
                }) => {
                    console.log(data);
                    if (data.code != 200) {
                        alert('出现错误, code ' + data.code);
                    } else {
                        this.depts = data.data;
                    }
                }).catch(function (error) {
                    console.log(error);
                    alert('连接服务器失败!');
                });
            }
        }

        Vue.createApp(App).mount('#app')
    </script>
</body>

</html>